<template>
  <view>
    <view>
      <view class="repair-room">
        <view class="repair-room-title">
          联系人
        </view>
        <view class="repair-room-cont ">
          <view class="repair-flex">
            <view class="title flex-left">
              小区：
            </view>
            <view class="flex-right"
              style="display: flex; justify-content: space-between; align-items: center;width:80%;">
              <view class="flex" style="width:100%;">
                <picker style="height: 50px;width: 100%;" @change="AreaChange" :value="Areaindex" :range="columns">
                  <view style="line-height: 50px;" class="picker">
                    {{AreaName}}
                  </view>
                </picker>
              </view>
              <view class="">
                <u-icon name="arrow-right" color="#999" size="32"></u-icon>
              </view>
            </view>
          </view>
          <view class="repair-flex">
            <view class="title flex-left">
              楼宇：
            </view>
            <view class="flex-right"
              style="display: flex; justify-content: space-between; align-items: center;width:80%;">
              <view class="flex" style="width:100%;">
                <picker style="height: 50px;width: 100%;" @change="BulidChange" :value="bulidindex" :range="columns2">
                  <view style="line-height: 50px;" class="picker">
                    {{bulidindex>0?columns2[bulidindex]:BuildName}}
                  </view>
                </picker>
              </view>
              <view class="">
                <u-icon name="arrow-right" color="#999" size="32"></u-icon>
              </view>
            </view>
          </view>
          <view class="repair-flex">
            <view class="title flex-left">
              单元：
            </view>
            <view class="flex-right"
              style="display: flex; justify-content: space-between; align-items: center;width:80%;">
              <view class="flex" style="width:100%;">
                <picker style="height: 50px;width: 100%;" @change="UnitChange" :value="unitindex" :range="columns3">
                  <view style="line-height: 50px;" class="picker">
                    {{unitindex>0?columns3[unitindex]:UnitsName}}
                  </view>
                </picker>
              </view>
              <view class="">
                <u-icon name="arrow-right" color="#999" size="32"></u-icon>
              </view>
            </view>
          </view>
          <view class="repair-flex">
            <view class="title flex-left">
              楼层：
            </view>
            <view class="flex-right"
              style="display: flex; justify-content: space-between; align-items: center;width:80%;">
              <view class="flex" style="width:100%;">
                <picker style="height: 50px;width:100px;" @change="FloorChange" :value="floorindex" :range="columns4">
                  <view style="line-height: 50px;" class="picker">
                    {{floorindex>0?columns4[floorindex]:FloorName}}
                  </view>
                </picker>
              </view>
              <view class="">
                <u-icon name="arrow-right" color="#999" size="32"></u-icon>
              </view>
            </view>
          </view>
          <view class="repair-flex">
            <view class="title flex-left">
              房号：
            </view>
            <view class="repair-name flex-right">
              <u-input v-model="roomcode" type="text" :border="false" placeholder="房号" />
            </view>
          </view>
          <view class="repair-flex">
            <view class="title flex-left">姓名:</view>
            <view class="repair-name flex-right">
              <u-input v-model="custname" type="text" :border="false" placeholder="姓名" />
            </view>
          </view>
          <view class="repair-flex">
            <view class="title flex-left">房屋面积:</view>
            <view class="repair-name flex-right">
              <u-input v-model="BuiltArea" type="text" :border="false" placeholder="房屋面积" />
            </view>
          </view>
          <view class="repair-flex">
            <view class="title flex-left">联系电话:</view>
            <view class="repair-phone flex-right">
              <u-input v-model="phone" type="text" :border="false" placeholder="联系方式" maxlength="11" />
            </view>
          </view>
        </view>
      </view>
      <view class="confirm">
        <u-button type="primary" size="default" class="custom-style" :ripple="true" @click="submit">确认修改
        </u-button>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>

</template>

<script>
export default {
  data () {
    return {
      phone: '',
      custname: '',
      roomid: '',
      roomcode: '',
      MerchantId: '',
      aredata: [],
      builddata: [],
      unitsdata: [],
      floorsdata: [],
      Areadatalist: [],
      builddatalist: [],
      unitsdatalist: [],
      floorsdatalist: [],
      index: -1,
      Areaindex: 0,
      bulidindex: 0,
      unitindex: 0,
      floorindex: 0,
      AreaId: '',
      BuildId: '',
      UnitsId: '',
      AreaName: '',
      BuildName: '',
      UnitsName: '',
      FloorName: '',
      Floor: '',
      BuiltArea: null,
      columns: [],
      columns2: [],
      columns3: [],
      columns4: []
    };
  },

  onLoad (e) {
      console.log(e)
	this.roomid=e.id
    let room = uni.getStorageSync('MAIN_ROOM');
    this.initRoom()
	
  },
  methods: {
    async initRoom () {
      let key = uni.getStorageSync("appkey");
      var data = await this.$u.api.GetRoomInfo({
        RoomId: this.roomid
      })
      console.log(data,'房屋信息')
      
	  this.phone = data[0].MobilePhone
	  this.custname = data[0].CustName
	  this.roomid = data[0].RoomId
	  this.roomcode = data[0].RoomCode
	  this.AreaName = data[0].AreaName
	  this.AreaId = data[0].AreaId
	  this.BuildId = data[0].BuildId
	  this.BuildName = data[0].BuildName
	  this.MerchantId = data[0].MerchantId
      this.Floor = data[0].Floor
      this.FloorName = '第' + data[0].Floor + '层'
      this.UnitsId = data[0].UnitId
      this.UnitsName = data[0].Units
      this.BuiltArea = data[0].BuiltArea
	  
	  this.initArea()
	  this.bulid(this.AreaId)
	  this.units(this.BuildId)
	  this.floors(this.BuildId)
    },

    async initArea () {
      var that = this
      var areadata = await this.$u.api.GetAreaList({
        MerchantId: this.MerchantId
      })
      that.aredata = areadata
      this.Areadatalist = areadata
      if (areadata.length > 0) {
        areadata.map(function (item, index) {
          that.columns.push(item.AreaName)
        })
      }
      
      for(var i = 0; i< areadata.length; i++){
          if(this.AreaId == areadata[i].AreaId){
              this.Areaindex = i
          }
      }
    },
    AreaChange (e) {
      console.log(123, e)
      this.Areaindex = e.detail.value
      this.AreaId = this.Areadatalist[this.Areaindex].AreaId
      this.AreaName = this.Areadatalist[this.Areaindex].AreaName
	  console.log("小区id",this.AreaId)
      this.bulid(this.AreaId)
      this.bulidindex = 0
      this.unitindex = 0
      this.floorindex = 0
	  this.BuildId = ''
	  this.UnitsId=''
	  this.Floor=null
      this.BuildName = '请选择楼宇'
      this.UnitsName = '请选择单元'
      this.FloorName = '请选择楼层'
    },
    BulidChange (e) {
      this.bulidindex = e.detail.value
      this.BuildId = this.builddatalist[this.bulidindex].BuildId
      this.BuildName = this.builddatalist[this.bulidindex].BuildName
	  console.log("楼宇id",this.BuildId)
      this.units(this.BuildId)
      this.floors(this.BuildId)
      this.unitindex = 0
      this.floorindex = 0
	  this.UnitsId=''
	  this.Floor=null
      this.UnitsName = '请选择单元'
      this.FloorName = '请选择楼层'
    },
    UnitChange (e) {
      this.unitindex = e.detail.value
	  console.log("单元id",this.BuildId)
      this.UnitsId = this.unitsdatalist[this.unitindex].UnitId
      this.UnitsName = this.unitsdatalist[this.unitindex].UnitsName
    },
    FloorChange (e) {
      this.floorindex = e.detail.value
      this.Floor = this.floorsdatalist[this.floorindex].Floor
      this.FloorName = this.floorsdatalist[this.floorindex].FloorName
    },
    async bulid (AreaId) {
	  console.log("小区id",AreaId)
      var that = this
      that.columns2 = []
	  that.columns3 = []
	  that.columns4 = []
      this.builddatalist = []
      var builddata = await this.$u.api.GetBuildListByAreaId({
        AreaId: AreaId
      })
	  console.log("楼宇",builddata)
      that.builddata = builddata
      this.builddatalist = builddata
      if (builddata.length > 0) {
        builddata.map(function (item, index) {
          that.columns2.push(item.BuildName)
        })
      }
    },
    async units (BuildId) {
      var that = this
      that.columns3 = []
      this.unitsdatalist = []
      var unitsdata = await this.$u.api.getBuildUnitsList({
        BuildId: BuildId
      })
      that.unitsdata = unitsdata
      this.unitsdatalist = unitsdata
      if (unitsdata.length > 0) {
        unitsdata.map(function (item, index) {
          that.columns3.push(item.UnitsName)
        })
      }
    },
    async floors (BuildId) {
      var that = this
      that.columns4 = []
      this.floorsdatalist = []
      var floorsdata = await this.$u.api.getBuildFloorList({
        BuildId: BuildId
      })
      that.floorsdata = floorsdata
      this.floorsdatalist = floorsdata
      if (floorsdata.length > 0) {
        floorsdata.map(function (item, index) {
          that.columns4.push(item.FloorName)
        })
      }
    },
    async submit () {
      if (this.roomid == '') {
        this.$refs.uToast.show({
          title: '未找到房屋信息',
          type: 'error'
        })
        return false;
      } else {
        if (this.roomcode == '') {
          this.$refs.uToast.show({
            title: '请填写房屋编号',
            type: 'error'
          })
          return false;
        }
        if (this.custname == '') {
          this.$refs.uToast.show({
            title: '请填写业主姓名',
            type: 'error'
          })
          return false;
        }
        if (this.phone == '') {
          this.$refs.uToast.show({
            title: '请填写联系电话',
            type: 'error'
          })
          return false;
        }
        if (this.AreaId == '' || this.AreaName == '') {
          this.$refs.uToast.show({
            title: '请选择所在小区',
            type: 'error'
          })
          return false;
        }
        if (this.BuildId == '' || this.BuildName == '') {
          this.$refs.uToast.show({
            title: '请选择所在楼宇',
            type: 'error'
          })
          return false;
        }
        if (this.UnitsId == '' || this.UnitsName == '') {
          this.$refs.uToast.show({
            title: '请选择所在单元',
            type: 'error'
          })
          return false;
        }
        if (this.Floor == null) {
          this.$refs.uToast.show({
            title: '请选择楼层',
            type: 'error'
          })
          return false;
        }
        if (this.BuiltArea == null) {
          this.$refs.uToast.show({
            title: '请填写房屋面积',
            type: 'error'
          })
          return false;
        }
        let parms = {
          RoomId: this.roomid, //必须
          RoomCode: this.roomcode,
          CustName: this.custname,
          MobilePhone: this.phone,
          AreaId: this.AreaId,
          AreaName: this.AreaName,
          BuildId: this.BuildId,
          BuildName: this.BuildName,
          UnitId: this.UnitsId,
          Units: this.UnitsName,
          Floor: this.Floor,
          BuiltArea: this.BuiltArea
        }
        console.log("提交表单", parms)
        let data = await this.$u.api.UpInfoByRoomId(parms)
        if (data > 0) {
          this.$refs.uToast.show({
            title: '修改成功',
            type: 'success',
          })
          setTimeout(() => {
          	uni.switchTab({
          		url: '/pages/index/index'
          	});
          }, 1300)
        }
      }

    },
  }
}
</script>

<style>
/* @import "../../static/css/main.scss"; */
/* @import "../../static/css/icon.scss"; */

.cu-form-group .title {
  min-width: calc(4em + 15px);
}


page {
  background-color: #f1f1f1;
}

.confirm {
  padding: 0 20px;
  bottom: 10px;
  width: 100%;
  margin-top: 40px;
  margin-bottom: 30px;
}

.confirm button {
  background-color: #1FBA4E;
}

.tag-view {
  margin: 10upx 10upx 10upx 0;
  display: inline-block;
}

.pdl1 {
  /* padding-left: 26rpx; */
}

.ub-ver {
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.ulev2 {
  width: 90%;
  font-size: 30rpx;
}

.pdr1 {
  padding-right: 32rpx;
  display: inline-block;
}

.ub-ac {
  -webkit-box-align: center;
  box-align: center;
  display: inline-block;
}

.uc-a1 {
  border-radius: 20rpx;
}

.ub-ver {
  -webkit-box-orient: vertical;
  box-orient: vertical;
}

.pdt3 {
  padding-top: 20rpx;
}

.repair-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-top: solid 1px #eee;
  height: 45px;
  background-color: #fff;
}

.flex-right {
  padding-left: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-right-icon {
  padding-left: 10px;
}

.flex-left {
  width: 20%;
}



.repair-room {
  background-color: #fff;
  padding: 10px 10px 0 10px;
  border-radius: 5px;
  margin-top: 10px;
}

.repair-room-title {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: dashed 1px #f1f1f1;
}

.repair-cont {
  margin-top: 15px;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
}

.complaint-center-box {
  margin-top: 15px;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
}

.complaint-center-box-top {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.input-left {
  padding-top: 5px;
}

.input-right {
  width: 100%;
  padding-left: 8px;
}


.grid.col-4.grid-square>uni-view {
  padding-bottom: calc((100% - 30px)/ 4);
  height: 0;
  width: calc((100% - 30px)/ 4);
  border: 1px solid #B6B5B5;
}

.cu-form-group {
  background-color: #f1f1f1;
}

.repair-bottom {
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  margin-top: 15px;
}
</style>